<!-- 行为 -->
 <!-- lang="ts" :支持ts语法  setup：是 Vue3 的组合式 API 写法 -->
<script lang="ts" setup>
console.log('根组件被加载了')
const msg:string = 'Hello Word'
const nickName:string = '小明'
const age:number = 19
</script>

<!-- 结构 -->
 <template>
  <h1 class="title ">{{ msg }}</h1>
  <p>{{ msg }}</p>
  <p>{{ nickName.charAt(0) }}</p>
  <p>{{ age >=18 ? '已成年':'你还小' }}</p>
  <input type="text"  value="{{ msg }}">

   <!-- 1.在插值表达式中使用的数据 必须在setup函数中进行了提供 -->
  <!-- <p>{{hobby}}</p>  // 如果在setup函数中不存在 则会报错 -->

  <!--  2.支持的是表达式，而非语句，比如：if   for ... -->
  <p>{{if}}</p>
  <!--  3.不能在标签属性中使用 {{  }} 插值 (插值表达式只能标签中间使用) -->
  <p title="{{username}}">我是P标签</p>
  
  

  
 </template>

 <!-- 样式 -->
  <!-- scoped:样式 只对当前组件有效 -->
  <style scoped>
  .title{
    color: red;
  }
</style>